<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 1200px;
            margin: 0 auto;
        }

        .cateList {
            width: 100%;
        }

        .one {
            width: 100%;
            display: flex;
            background-color: #f1f1f1;
            font-size: 13px;
        }

        .one div {
            flex: 1;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }

        .active {
            color: red;
        }

        .two {
            display: flex;
            background-color: #f1f1f1;
            font-size: 13px;
            padding: 15px 20px;
            box-sizing: border-box;
            margin: 15px 0;
        }

        .cate {
            display: flex;
            margin-left: 10px;
        }

        .cate div {
            margin-right: 20px;
            cursor: pointer;
        }

        .sort {
            display: flex;
            background-color: #f1f1f1;
            font-size: 13px;
            padding: 15px 20px;
            box-sizing: border-box;
        }

        .sort div {
            margin-right: 20px;
            cursor: pointer;
        }
        .goods{
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .goods div{
            width: 200px;
        }
        .goods img{
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    class GoodsList extends React.Component {
        state = {

        }
        render() {
            return (
                <div className='goods'>
                    {
                        this.props.list.map((item,index)=>{
                            return (
                                <div key={index}>
                                  <img src={item.image} alt="" />
                                  <div>{item.store_name}</div>    
                                </div>
                            )
                        })
                    }
                </div>
            )
        }
    }
    class CateList extends React.Component {
        all = {
            cate_name: "全部",
            id: 0
        }
        state = {
            cateList: [],
            // 当前选中的一级分类索引
            activeIndex: 0,
            twoIndex: 0,
            sortList: ["默认", "价格", "上架时间"],
            sortIndex: 0
        }
        render() {
            let { cateList, activeIndex, twoIndex, sortList, sortIndex } = this.state;
            return (
                <div className='cateList'>
                    <div className='one'>
                        {
                            cateList.map((item, index) => {
                                return <div key={index} className={activeIndex === index ? 'active' : ''} onClick={() => {
                                    this.setState({
                                        activeIndex: index,
                                        twoIndex: 0
                                    },()=>{
                                        this.sendParams();
                                    })
                                }}>{item.cate_name}</div>
                            })
                        }
                    </div>
                    <div className='two'>
                        <div>分类:</div>
                        <div className='cate'>
                            {
                                cateList.length !== 0 && cateList[activeIndex].children.map((item, index) => {
                                    return <div key={index} className={twoIndex === index ? 'active' : ''} onClick={() => {
                                        this.setState({
                                            twoIndex: index,
                                        },()=>{
                                            this.sendParams();
                                        })
                                    }}>{item.cate_name}</div>
                                })
                            }
                        </div>
                    </div>
                    <div className='sort'>
                        {
                            sortList.map((item, index) => {
                                return <div key={index} className={sortIndex === index ? 'active' : ""} onClick={() => {
                                    this.setState({
                                        sortIndex: index
                                    },()=>{
                                        this.sendParams();
                                    })
                                }}>{item}</div>
                            })
                        }
                    </div>
                </div>
            )
        }
        sendHttp(method, url) {
            return new Promise((relove, reject) => {
                let xhr = new XMLHttpRequest();
                xhr.open(method, url);
                xhr.send();
                xhr.onreadystatechange = () => {
                    if (xhr.readyState === 4) {
                        let res = JSON.parse(xhr.response);
                        relove(res)
                    }
                }
            })
        }
        async componentDidMount() {
            let res = await this.sendHttp("get", "http://demo26.crmeb.net/api/category");
            console.log(res)
            // 处理数据 
            res.data.forEach((item, index) => {
                item.children.unshift(this.all)
            })
            this.setState({
                cateList: res.data
            },()=>{
                this.sendParams();
            })
            console.log(this.props)

        }
        sendParams() {
            let {cateList} = this.state
            // 获取一级分类id
            let cid = cateList[this.state.activeIndex].id
            let sid = cateList[this.state.activeIndex].children[this.state.twoIndex].id;
            let sort = this.state.sortList[this.state.sortIndex]
            // 调用父组件传递过来的函数 并将 一级分类id 二级分类id 排序方法传递给父组件
            this.props.getParams(cid, sid, sort);
        }
    }
    class App extends React.Component {
        cateRef=React.createRef();
        state = {
            list:[]
        }
        render() {
            return (
                <div className='box'>
                    <CateList ref={this.cateRef} getParams={(cid, sid, sort) => this.getParams(cid, sid, sort)} />
                    <GoodsList list={this.state.list}/>
                </div>
            )
        }
        async getParams(cid, sid, sort) {
            console.log(cid, sid, sort)
            console.log(this.cateRef)
            let priceOrder =""
            let news = 0
            if(sort==='价格'){
                priceOrder='asc'
            }else if(sort==='默认'){
                priceOrder=""
                news=0
            }else{
                news=1
            }
            let res = await this.cateRef.current.sendHttp("get",`http://demo26.crmeb.net/api/pc/get_products?page=1&limit=10&cid=${cid}&sid=${sid}&priceOrder=${priceOrder}&news=${news}`);
            console.log(res)
            this.setState({
                list:res.data.list
            })
        }
    }

    ReactDOM.render(<App />, document.getElementById("root"))
</script>

</html>